<template>
  <div class="check-box">
    <span class="suc-order comm-order-checkbox" @click="judge1">
      <span class="comm-checkbox">
        <i :class="{'iconfont':true,'icon-checkbox':true,'icon-checkbox2':isChecked1}"></i>
      </span>
      只看今日已成订单
    </span>
    <span class="cancel-order comm-order-checkbox" @click="judge2">
      <span class="comm-checkbox">
        <i :class="{'iconfont':true,'icon-checkbox':true,'icon-checkbox2':isChecked2}"></i>
      </span>
      只看今日可撤订单
    </span>
  </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return {
        isChecked1: false,
        isChecked2: false
      }
    },
    props: {
      checkStatus: {
        type: String
      }
    },
    computed: {
      status: function () {
        return
      }
    },
    created: function () {
      if (this.checkStatus == 1) {
        this.isChecked1 = true
        this.isChecked2 = false
      } else if (this.checkStatus == 2) {
        this.isChecked2 = true
        this.isChecked1 = false
      }
    },
    methods: {
      judge1(){
        this.isChecked1 = !this.isChecked1
        if (this.isChecked1) {
          this.isChecked2 = false
        }
        var checkStatus = (this.isChecked1 || this.isChecked2) ? (this.isChecked1 ? '1' : '2') : '0'; // 已成yc是1  可撤cd是2
        this.$root.eventHub.$emit('check',checkStatus)
        this.$root.eventHub.$emit('check_to_index',checkStatus) //把checkStatus传给index.vue，当切换列表时，另一列表页能获取checkStatus
      },
      judge2(){
        this.isChecked2 = !this.isChecked2
        if (this.isChecked2) {
          this.isChecked1 = false
        }
        var checkStatus = (this.isChecked1 || this.isChecked2) ? (this.isChecked1 ? '1' : '2') : '0'; // 已成yc是1  可撤cd是2
        this.$root.eventHub.$emit('check',checkStatus)
        this.$root.eventHub.$emit('check_to_index',checkStatus)//把checkStatus传给index.vue，当切换列表时，另一列表页能获取checkStatus
      }
    }
  }
</script>
<style type="text/css" scoped>
  .check-box {
    text-align: center;
    height: 25px;
  }

</style>
